<template>
  <a-button @click="addBtn" type="primary">
    <template #icon>
      <plus-outlined />
    </template>
    新增
  </a-button>
  <add-menu ref="addRef" @refresh="refresh"></add-menu>

  <a-table
      row-key="menuId"
      :pagination="false"
      v-if="tableList.list && tableList.list.length > 0"
      :defaultExpandAllRows="true"
      bordered
      :scroll="{ y: tableHeight }"
      :columns="columns"
      :data-source="tableList.list"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'type'">
        <a-tag color="red" v-if="record.type === '0'">目录</a-tag>
        <a-tag color="blue" v-if="record.type === '1'">菜单</a-tag>
        <a-tag color="cyan" v-if="record.type === '2'">按钮</a-tag>
      </template>
      <template v-if="column.key === 'icon'">
        <component :is="record.icon"></component>
      </template>
      <template v-if="column.key === 'action'">
        <a-button @click="editBtn(record)" style="margin-right: 15px;" type="primary">
          <template #icon>
            <edit-outlined />
          </template>
          编辑
        </a-button>
        <a-button @click="deleteBtn(record)" type="primary" danger>
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import useMenu from '@/composable/menu/useMenu'
import AddMenu from "@/views/system/menu/component/AddMenu.vue";
import useTable from "@/composable/menu/useTable";
const { tableHeight, columns, tableList,refresh } = useTable()
const {addBtn,editBtn,deleteBtn,addRef} = useMenu(refresh)

</script>

<style scoped lang="scss">
.vv{
  text-align: unset;
}
</style>
